<!-- 我的设置 -->

<template>
  <div class="DetailShihanDevice-MySetting">
    <MajorTitle title="设置" />

    <FormSlot>
      <template #label>
        <FormSwitch bind="linkAll" :switchWidth="64" text="全选" noLabel auto @change="changeAll" />
      </template>
      <div class="flexCC">
        <div v-for="i in 7" :key="i" class="flex1 flexCC">
          <b>{{ CORE.numWeek(i) }}</b>
          <FormSwitch :bind="`link${i % 7}`" :labelWidth="8" :switchWidth="64" text="联动" auto @change="changeLink" />
        </div>
      </div>
    </FormSlot>

    <FormSlot label="音量大小">
      <div class="flexCC">
        <FormSlider
          v-for="item in one.volumeList"
          :key="item.day"
          :one="item"
          bind="volumevalue"
          showInput
          noInputBtn
          string
          noLabel
          flex1
          @change="changeVolume(item)"
        />
      </div>
    </FormSlot>

    <FormSlot label="音量时间">
      <div class="flexCC">
        <SettingTime v-for="item in one.volumeList" :key="item.day" :obj="item" @change="changeVolume" />
      </div>
    </FormSlot>

    <FormSlot label="开关屏时间">
      <div class="flexCC">
        <SettingTime v-for="item in one.screenList" :key="item.day" :obj="item" @change="changeScreen" />
      </div>
    </FormSlot>

    <FormSlot label="开关机时间">
      <div class="flexCC">
        <SettingTime v-for="item in one.powerList" :key="item.day" :obj="item" @change="changePower" />
      </div>
    </FormSlot>
  </div>
</template>

<script>
// ============================== 导入依赖 ============================== //

import CORE from '@/CORE'

// ============================== 导出组件 ============================== //

export default {
  /**
   * 名称定义 (实际使用名称)
   */
  name: 'MySetting',

  /**
   * 混入列表 (配置选项合并)
   */
  mixins: [CORE.mixWeb()],

  /**
   * 组件导入 (Abc.vue + Abc/index.vue)
   */
  ...CORE.components(require.context('./', true, /vue$/)),

  /**
   * 本地方法 (轻量重要在前)
   */
  methods: {
    /**
     * 切换全选
     */
    changeAll(value) {
      Array(7).fill().forEach((_, i) => (this.one[`link${i}`] = value))
    },

    /**
     * 切换联动
     */
    changeLink() {
      this.one.linkAll = Array(7).fill().some((_, i) => this.one[`link${i}`] !== 1) ? 2 : 1
    },

    /**
     * 更新音量
     */
    changeVolume({ day, ...other }) {
      this.setArr('volumeList', 'volumeSetting', day, other, 'openscreen', 'closescreen', 'volumevalue')
    },

    /**
     * 更新开关屏
     */
    changeScreen({ day, ...other }) {
      this.setArr('screenList', 'terminalScreen', day, other, 'openscreen', 'closescreen')
    },

    /**
     * 更新开关机
     */
    changePower({ day, ...other }) {
      this.setArr('powerList', 'terminalPower', day, other, 'poweron', 'poweroff')
    },

    /**
     * 设置数组
     */
    setArr(listKey, strKey, day, other, onKey, offKey, volumeKey) {
      const { one } = this
      one[listKey].forEach((item) => {
        const onStr = `${item.beginHour}:${item.beginMinute}`
        const offStr = `${item.endHour}:${item.endMinute}`
        const hasLink = one[`link${day}`] === 1 && one[`link${item.day}`] === 1
        CORE.merge(item, hasLink ? other : {}, { [onKey]: onStr, [offKey]: offStr })
      })
      const strList = one[listKey].map((item) => {
        const newItem = { day: item.day, [onKey]: item[onKey], [offKey]: item[offKey] }
        return volumeKey ? { ...newItem, [volumeKey]: item.volumeKey } : newItem
      })
      one[strKey] = JSON.stringify(strList)
    },
  },
}
</script>

<style lang="scss">
@import './index.scss';
</style>
